<template>
  <div>
    <!-- 轮播开始 -->
    <el-carousel :interval="4000" type="card" height="189px" :autoplay="false">
      <el-carousel-item v-for="(item,index) in bannerList" :key="index">
        <img v-lazy="item.imageUrl" width="510px" height="189px" alt />
      </el-carousel-item>
    </el-carousel>
    <!-- 轮播结束 -->

    <div>
      <!-- 推荐歌单开始 -->
      <div class="sheet_box">
        <div class="overstyle">
          <h3>推荐歌单</h3>
        </div>
        <div class="line"></div>
        <sheet-list :sheetlist="Songsheet"></sheet-list>
      </div>
      <!-- 推荐歌单结束 -->

      <!-- 独家放送开始 -->
      <div class="sheet_box">
        <div class>
          <h3>独家放送</h3>
        </div>
        <div class="line"></div>
        <div class="flex-box">
          <div class="flex-item" v-for="(o,index) in exclusivelist" :key="index">
            <img v-lazy="o.sPicUrl" width="310" height="174" />
            <p class="title">{{ o.name }}</p>
          </div>
        </div>
      </div>
      <!-- 独家放送结束 -->

      <!-- 最新音乐开始 -->
      <div class="sheet_box">
        <div>
          <h3>最新音乐</h3>
        </div>
        <div class="line"></div>
        <div class="table-container">
          <table-list :songlist="newsonglist"></table-list>
        </div>
      </div>
      <!-- 最新音乐结束 -->
    </div>
  </div>
</template>

<script>
import sheetList from 'components/sheet-list/sheet-list'
import tableList from 'components/table-list/table-list'

export default {
  name: 'nav-per',
  created () {
    this.getBanner()
    this.getPersonalList()
    this.getPrivate()
    this.getNewSong()
  },
  data () {
    return {
      bannerList: [],
      Songsheet: [],
      exclusivelist: [],
      newsonglist: [],
      artists: []
    }
  },
  methods: {
    getSonglist (item) {
      this.$http.get(`/api/playlist/detail?id=${item.id}`).then((res, err) => {
        if (err) {
          console.log(err.message)
        } else {
          let temp = res.data.playlist.tracks
          this.$router.push({
            name: "showlist",
            query: {
              sheetobj: item,
              songlist: temp
            }
          })
        }
      })
    },
    getBanner () {
      this.$http.get("/api/banner").then((res, err) => {
        this.bannerList = res.data.banners
        if (err) {
          console.log(err.message)
        }
      })
    },
    getPersonalList () {
      this.$http.get("/api/personalized?limit=10").then((res, err) => {
        if (err) {
          console.log(err.message)
        }
        this.Songsheet = res.data.result
      })
    },
    getPrivate () {
      this.$http.get("/api/personalized/privatecontent").then((res, err) => {
        if (err) {
          console.log(err.message)
        }
        this.exclusivelist = res.data.result
      })
    },
    getNewSong () {
      this.$http.get("/api/personalized/newsong").then((res, err) => {
        if (err) {
          console.log(err.message)
        } else {
          this.newsonglist = res.data.result
        }
      })
    }
  },
  components: {
    sheetList,
    tableList
  }
};
</script>

<style lang="scss" scoped>
.el-input-my {
  width: 300px;
  position: absolute;
  left: 20%;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 0;
  height: 60px;
}
.el-carousel {
  user-select: none;
}

.row-bg {
  padding: 10px 0;
}

.sheet_box {
  position: relative;
  user-select: none;
  .line {
    border-bottom: 1px solid #ccc;
    width: 100%;
    margin: 10px 0;
  }

  h3 {
    margin: 6px 0px;
    text-align: left;
    font-weight: normal;
    font-size: 18px;
  }

  .flex-box {
    display: flex;
    justify-content: space-between;

    .flex-item {
      .title {
        padding: 10px;
        font-size: 14px;
        text-align: left;
      }
    }
  }

  .table-container {
    height: 360px;
  }
}

//  table {
//       width: 100%;
//       border: 1px solid #eee;
//       margin-top: 10px;
//       tbody > tr td {
//         width: 50%;
//       }
//       tbody > tr:nth-child(2n) {
//         background-color: #fafafa;
//       }
//       tr > td:nth-child(2n + 1) {
//         border-right: 1px solid #ddd;
//       }
//       tr > td:hover {
//         background-color: #eee;
//       }
//       td {
//         height: 60px;
//         .card_box {
//           box-sizing: border-box;
//           padding: 10px 0;
//           height: 60px;
//           width: 100%;
//           .card_left {
//             width: 20%;
//             float: left;
//             .index {
//               float: left;
//               width: 40px;
//               height: 40px;
//               text-align: center;
//               line-height: 40px;
//               font-size: 12px;
//               display: block;
//               color: #aaa;
//             }
//           }
//           .card_right {
//             width: 80%;
//             float: left;
//             height: 40px;
//             .span_box {
//               width: 100%;
//               height: 100%;
//               span {
//                 display: block;
//                 text-align: left;
//                 line-height: 20px;
//               }
//               .song_name {
//                 font-size: 14px;
//                 color: #000;
//               }
//               .author {
//                 padding-left: 10px;
//                 font-size: 12px;
//                 color: #bbb;
//               }
//             }
//           }
//         }
//       }
//     }
</style>
